<template>
<!--  <div style="width: 770px;height: 900px; margin: 0px 0px 0px 200px">-->
    <div style="width: 1000px;height: auto; margin: 20px auto">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 30px 0px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{newsDetail.name}}</el-breadcrumb-item>
<!--        <el-breadcrumb-item>{{newsDetail.title }}</el-breadcrumb-item>-->
      </el-breadcrumb>
    <div v-for="p in newsList">
      <el-card style="padding: 12px 0px;margin: 20px 0px">

          <p style="color: #333333; font-size: 18px ;margin: 0px ;padding: 0px">
            <a :href="'/newsDetail?newsDetailId='+p.id">
            {{p.title}}</a>
          </p> <br>
          <p class="truncate"   style="color: #999999; font-size: 14px  ;margin: 0px ;padding: 0px ;border: 1px white solid ;
              " :title="p.title">{{p.content}}</p>
          <span style="float: right">发布时间:{{p.publishTime}}</span>
      </el-card>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      newsList:{},
      newsDetail:{},
    };
  },
  methods: {
    loadNewsList() {
      let newsCategoryId = this.$router.currentRoute.query.newsCategoryId;
      // let newsCategoryId = this.$route.params.newsCategoryId;
      let url = 'http://localhost:9200/news-category/list/cha?id='+newsCategoryId;
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.newsList = jsonResult.data;
        } else {
          this.$message.error(jsonResult.message);
        }
      })
    },
    loadNewsDetail() {
      let id = this.$router.currentRoute.query.newsCategoryId;
      console.log(id)
      let url = 'http://localhost:9200/news-category/standard?id='+id;
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.newsDetail = jsonResult.data;
        } else {
          this.$message.error(jsonResult.message);
        }
      })
    },
  },
  mounted() {
    this.loadNewsList()
    this.loadNewsDetail()
  }
}
</script>
<style>
element.style {
  width: auto;
  height: auto;
  margin: 0px !important;
}

.midall{
  margin: 0 auto;width: 980px;height:900px;border: 0px red solid;
}
.midleft{
width: 680px;height:900px;border: 0px green solid;text-align: left;display: inline-block;float: left;
}
.title{
text-align: center;padding-bottom: 10px;
}
.leftP{
  text-indent: 2em;margin-top: 30px; line-height: 30px;font-size: 20px;
}
.pic{
  text-align: center;padding:40px;overflow: hidden;
}

a {
  color: #333333;
}
a:hover{
  color: #00b4aa;
}
a:active{
  color: yellow;
}

.truncate {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate::after {
  content: "...";
}

.truncate[data-truncate] {
  max-height: calc(1em * 20);
  overflow: hidden;
}

.truncate {
  position: relative;
}



</style>

